<template lang="pug">
    .container
        .row
            .col-sm-10.col-md-9.mx-auto
                //面包屑
                b-breadcrumb
                    b-breadcrumb-item
                        router-link(to="/")
                            b-icon.mr-1(icon="house-fill" scale="1.25" shift-v="1.25" aria-hidden="true")
                            | {{breadcrumbItems[0].name}}
                    template(v-for="item in breadcrumbItems.slice(1, bLength-1)")
                        b-breadcrumb-item
                            router-link(:to="'/category/' + item.cid")
                                | {{item.name}}
                    b-breadcrumb-item(active)
                        | {{breadcrumbItems[bLength-1].name}}

                //标题
                .px-2
                    h1.mt-5 {{categoryName}}
                    p.lead 最近更新: {{updateTime}}

                //目录
                hr.my-5
                .d-flex.flex-column.px-2
                    template(v-for="child in childCategoryList")
                        h4.mb-4.mt-1
                            router-link.text-gray-700(:to="'/category/' + child.cid")
                                .icon-stack.bg-gray-500.text-white.mr-4
                                    arrow-right-icon
                                span.text-m {{child.name}}
                hr.my-5
</template>

<script>
import SBProTopNav from '@structural/top-nav.vue';
import SBProPageHeader from '@structural/page-header.vue';
import SBProLayoutDefault from '@structural/layout-default.vue';
import SBProPageSection from '@structural/page-section.vue';
import MediaListItem from '../../media_layout/media-list-item';
import { getRecentUpdateTimeByCid } from '../../../api/category';

export default {
    name: 'catalog',
    components: {
        MediaListItem,
        'sbpro-top-nav': SBProTopNav,
        'sbpro-page-header': SBProPageHeader,
        'sbpro-layout-default': SBProLayoutDefault,
        'sbpro-page-section': SBProPageSection,
    },
    methods: {
        loadRecentUpdateTime() {
            getRecentUpdateTimeByCid(this.cid).then(datetime => {
                this.updateTime = datetime.split(' ')[0];
            });
        },
    },
    computed: {
        cid() {
            return parseInt(this.$route.params.cid);
        },
        categoryName() {
            return this.$store.getters.cName(this.cid);
        },
        bLength() {
            return this.breadcrumbItems.length;
        },
        breadcrumbItems() {
            return this.$store.getters.routerParents(this.cid);
        },
        childCategoryList() {
            return this.$store.getters.routerChildren(this.cid);
        },
    },
    data() {
        return {
            updateTime: '2020-08-08',
        };
    },
    created() {
        this.loadRecentUpdateTime();
    },
    watch: {
        cid: function() {
            this.loadRecentUpdateTime();
        },
    },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.icon-stack {
    height: 1.4rem;
    width: 1.4rem;
}
</style>
